<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String path = request.getContextPath();
    request.setAttribute("path", path);
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <base href="<%=basePath%>">
    <title>标题</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <!-- 引入 echarts.js -->
    <script src="${pageContext.request.contextPath}/echarts/echarts.min.js"></script>
    <script src="${pageContext.request.contextPath}/js/jquery-2.1.0.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css">
    <script src="${pageContext.request.contextPath}/layui/layui.js"></script>
</head>
<body>
<form>
    <%--        日期搜索框--%>
    <div class="layui-inline">
        <label class="layui-form-label">请选择范围</label>
        <div class="layui-input-inline">
            <input type="text" class="layui-input" id="test16" name="date"  placeholder="开始 到 结束">
        </div>
    </div>
        <%--      提交重置--%>
        <div class="layui-input-inline">
            <a class="layui-btn"  id="demo1">立即提交</a>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
</form>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 1300px;height:480px;display:inline-block"></div>
<script>
    layui.use(['laydate','form'],function () {
        var laydate=layui.laydate;

        laydate.render({
            elem: '#test16'
            ,type: 'datetime'
            ,range: '到'
            ,format: 'yyyy-MM-dd HH:mm:ss'
        });

        $('#demo1').click(function () {
            var scopDate=$("#test16").val();
            $.ajax({
                type:'post',
                url:'${pageContext.request.contextPath}/dataAnal/outAndInMoney',
                data:{
                    'scopDate':scopDate
                },
                dataType:'json',
                success:function (data) {
                    var chartDom = document.getElementById('main');
                    var myChart = echarts.init(chartDom);

                    var outDateX=[];
                    var outMoneyY=[];
                    var inMoneyY=[];
                    var inDateX=[];
                    var colors = ['#5470C6', '#EE6666'];


                    for(var i=0;i<data.outMoney.length;i++){
                        outDateX.push(data.outMoney[i][0]);
                        outMoneyY.push(data.outMoney[i][1]);
                    }
                    // alert(data.inMoney.length);
                    for(var i=0;i<data.inMoney.length;i++){
                        inDateX.push(data.inMoney[i][0]);
                        inMoneyY.push(data.inMoney[i][1]);
                    }
                     alert(inMoneyY);
                    myChart.setOption({
                        color: colors,
                        title: {
                            text: '2020年出入库总金额排行(单位：元)'
                        },
                        tooltip: {
                            trigger: 'none',
                            axisPointer: {
                                type: 'cross'
                            }
                        },
                        legend: {
                            data:['出库', '入库']
                        },
                        grid: {
                            top: 70,
                            bottom: 50
                        },
                        xAxis: [
                            {
                                type: 'category',
                                axisTick: {
                                    alignWithLabel: true
                                },
                                axisLine: {
                                    onZero: false,
                                    lineStyle: {
                                        color: colors[1]
                                    }
                                },
                                axisPointer: {
                                    label: {
                                        formatter: function (params) {
                                            return '入库总金额  ' + params.value
                                                + (params.seriesData.length ? '：' + params.seriesData[0].data : '');
                                        }
                                    }
                                },
                                data: inDateX
                            },
                            {
                                type: 'category',
                                axisTick: {
                                    alignWithLabel: true
                                },
                                axisLine: {
                                    onZero: false,
                                    lineStyle: {
                                        color: colors[0]
                                    }
                                },
                                axisPointer: {
                                    label: {
                                        formatter: function (params) {
                                            return '出库总金额  ' + params.value
                                                + (params.seriesData.length ? '：' + params.seriesData[0].data : '');
                                        }
                                    }
                                },
                                data: outDateX
                            }
                        ],
                        yAxis: [
                            {
                                type: 'value'
                            }
                        ],
                        series: [
                            {
                                name: '出库',
                                type: 'line',
                                xAxisIndex: 1,
                                smooth: true,
                                emphasis: {
                                    focus: 'series'
                                },
                                data: outMoneyY
                            },
                            {
                                name: '入库',
                                type: 'line',
                                smooth: true,
                                emphasis: {
                                    focus: 'series'
                                },
                                data: inMoneyY
                            }
                        ]
                    })
                }
            })
        })
    })

</script>

<script>
    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);

    var outDateX=[];
    var outMoneyY=[];
    var inMoneyY=[];
    var inDateX=[];
    var colors = ['#5470C6', '#EE6666'];
    $.ajax({
        type:'post',
        url:'${pageContext.request.contextPath}/dataAnal/outAndInMoney',
        data:{
            'scopDate':''
        },
        dataType:'json',
        success:function (data) {
            // alert(data.outMoney.length);
            for(var i=0;i<data.outMoney.length;i++){
                outDateX.push(data.outMoney[i][0]);
                outMoneyY.push(data.outMoney[i][1]);
            }
            // alert(data.inMoney.length);
            for(var i=0;i<data.inMoney.length;i++){
                inDateX.push(data.inMoney[i][0]);
                inMoneyY.push(data.inMoney[i][1]);
            }
            // alert(inDateX);
            myChart.setOption({
                color: colors,
                title: {
                    text: '2020年出入库总金额排行(单位：元)'
                },
                tooltip: {
                    trigger: 'none',
                    axisPointer: {
                        type: 'cross'
                    }
                },
                legend: {
                    data:['出库', '入库']
                },
                grid: {
                    top: 70,
                    bottom: 50
                },
                xAxis: [
                    {
                        type: 'category',
                        axisTick: {
                            alignWithLabel: true
                        },
                        axisLine: {
                            onZero: false,
                            lineStyle: {
                                color: colors[1]
                            }
                        },
                        axisPointer: {
                            label: {
                                formatter: function (params) {
                                    return '入库总金额  ' + params.value
                                        + (params.seriesData.length ? '：' + params.seriesData[0].data : '');
                                }
                            }
                        },
                        data: inDateX
                    },
                    {
                        type: 'category',
                        axisTick: {
                            alignWithLabel: true
                        },
                        axisLine: {
                            onZero: false,
                            lineStyle: {
                                color: colors[0]
                            }
                        },
                        axisPointer: {
                            label: {
                                formatter: function (params) {
                                    return '出库总金额  ' + params.value
                                        + (params.seriesData.length ? '：' + params.seriesData[0].data : '');
                                }
                            }
                        },
                        data: outDateX
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '出库',
                        type: 'line',
                        xAxisIndex: 1,
                        smooth: true,
                        emphasis: {
                            focus: 'series'
                        },
                        data: outMoneyY
                    },
                    {
                        name: '入库',
                        type: 'line',
                        smooth: true,
                        emphasis: {
                            focus: 'series'
                        },
                        data: inMoneyY
                    }
                ]
            })
        }
    })
</script>
</body>
</html>
